/**
 * @author:linjiye
 * @date: 2024/12/20
 * @desc:
 **/

import {Dimensions, FlatList, Image, StyleSheet, Text, View} from 'react-native'
import React, {useState} from 'react'
import {indexBanner} from "@/types/index";
import Animated, {useAnimatedRef, useAnimatedScrollHandler, useSharedValue} from "react-native-reanimated";
import ItemBanner from "@/components/index/ItemBanner";

type Props = {
    list: Array<indexBanner>
}

const screenWidth = Dimensions.get('window').width;
const IndexBanner = ({list}: Props) => {
    const [bannerList,SetBannerList] = useState(list)
    const scrollX = useSharedValue(0)
    const ref = useAnimatedRef<Animated.FlatList<any>>();

    const onScrollHandler = useAnimatedScrollHandler({
        onScroll: (e) => {
            scrollX.value = e.contentOffset.x
        }
    })

    return (
        <View style={styles.container}>
            <Animated.FlatList
                ref={ref}
                data={bannerList}
                keyExtractor={(_, index) => `list_item${index}`}
                renderItem={({item,index}) => (
                    <ItemBanner slideItem={item} index={index} scrollX={scrollX}/>
                    )}
                horizontal
                showsHorizontalScrollIndicator={false}
                pagingEnabled
                onScroll={onScrollHandler}
                scrollEventThrottle={16}
            />
        </View>
    )
}

export default IndexBanner

const styles = StyleSheet.create({
    container: {
        width: screenWidth,
        marginLeft: -16,
        // flex: 1,
        // justifyContent: "center",
        // alignItems: "center",
    }
})
